<?php
$posts = $args['posts'] ?? [];
$column = $args['column'] ?? 4;
if (empty($posts)) {
    $posts = get_random_posts($args['pagesize'] ?? 7);
}
?>
<section class="i6r">
    <?php
    foreach ($posts as $post) {
    ?>
        <a class="grid" href="<?= $post['link'] ?>" title="<?= $post['title'] ?>">
            <img src="<?= $post['thumbnail'] ?>" alt="<?= $post['title'] ?>">
            <section class="grid">
                <h3 class="nowrap2"><?= $post['title'] ?></h3>
                <span><?= $post['date'] ?></span>
                <p><?= $post['excerpt'] ?></p>
            </section>

        </a>
    <?php
    }
    ?>
</section>
<?php 
    if($column == 4){
        echo '<style>section.i6r{grid-template-columns: 1fr 1fr 1fr 1.8fr ;}</style>';
    }
    if($column == 3){
        echo '<style>section.i6r{grid-template-columns: 1fr 1fr 1.8fr ;}</style>';
    }
    if($column == 2){
        echo '<style>section.i6r{grid-template-columns:  1fr 1fr;}</style>';
    }
?>
<style>
    section.i6r {
        display: grid;
        gap: var(--gap);
    }


    section.i6r>a {
        grid-template-columns: auto;
        position: relative;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        transition: var(--transition);
        background-color: var(--color-primary);
        position: relative;
        gap: 0;
    }

    section.i6r>a>img {
        width: 100%;
        max-height: 10rem;
        height: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    section.i6r>a>section {
        padding: var(--gap);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.3);
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--border-radius);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    section.i6r>a>section>span,
    section.i6r>a>section>p {
        display: none;
    }

    section.i6r>a:nth-child(<?=$column?>)>section>span,
    p {
        display: block;
    }

    section.i6r>a>img:hover,
    section.i6r>a>section:hover {
        cursor: pointer;
    }
    section.i6r>a:nth-child(<?=$column?>) {
        grid-row: 1/3;
        grid-column: <?=$column?>/<?=$column + 1?>;
    }

    section.i6r>a:nth-child(<?=$column?>)>img {
        max-height: 25rem;
        height: 25rem;
    }

    @media (max-width: 1200px) {
        section.i6r>a>img {
            max-height: 12rem;
            height: 100%;
        }

        section.i6r>a:nth-child(<?=$column?>)>img {
            max-height: 25rem;
            height: 25rem;
        }
    }

    @media (max-width: 1024px) {
        section.i6r>a {
            grid-template-columns: auto;
        }

        section.i6r>a>img {
            max-height: 12rem;
            height: 100%;
        }

        section.i6r>a:nth-child(<?=$column?>)>img {
            max-height: 9rem;
            height: 100%;
        }
        section.i6r {
        display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        section.i6r>a:nth-child(<?=$column?>) {
            grid-row: auto;
            grid-column: auto
        }

    }

    @media (max-width: 768px) {
        section.i6r {
            grid-template-columns: 1fr 1fr 1fr;
        }

        section.i6r>a:nth-child(3) {
            grid-column: auto;
        }

        section.i6r>a:nth-child(<?=$column?>) {
            grid-column: auto;
        }

        section.i6r>a>img {
            height: 16rem;
        }
    }

    @media (max-width: 576px) {
        section.i6r {
            grid-template-columns: 1fr;
        }
    }
</style>